<template>
	<view class="">
		<u-toast ref="uToast"></u-toast>
		<view class="header_tab">
			 <u-tabs 
			 :list="tabList" 
			 @click="tabChange" 
			 :scrollable="true" 
			 :current="current"
			 lineWidth="30"
			 itemStyle="height: 100rpx;display:inline-block;width:100rpx;text-align:center;line-height:100rpx;"
			:activeStyle="{
			 lineHeight:'80rpx',
			 color: '#303133',
			 fontWeight: 'bold',
			 }"
			 ></u-tabs>
		</view>
		<view class="tab_content">
			<view class="tab_item">
				<view style="width: 100%;" v-if="tableData.length == 0">
					<u-empty></u-empty>
				</view>
				<view class="content send_item" v-for="item in tableData" :key="item.id"  @click="goToUrl(item.id)">
					<view class="date flex flex_bet flex_align">
						<view class="time">签收日期：<text style="color: #fff;">{{item.signfor_time ? item.signfor_time.slice(0,-3) : '未签收'}}</text></view>
						<view class="state" v-if="item.status == '暂存'">当前状态：<text style="color: #211b9c;background-color: #fff;">暂存</text></view>
						<view class="state" v-else>当前状态：<text :class="[item.status=='待付款' || item.status=='待签收' ?'unreceipted':'signed']">{{item.status}}</text></view>
					</view>
					<view class="details flex flex_bet flex_align">
						<view class="details_text">
							<view class="text"><text class="info">寄修产品型号：</text>{{item.product_model}}</view>
							<view class="text"><text class="info">寄修产品SN码：</text>{{item.serial_number}}</view>
							<view class="text"><text class="info">寄修单号：</text>{{item.order_num}}</view>
							<view class="text"><text class="info">快递单号：</text>
								<text :class="item.express_number ? '' : 'coRed'">{{item.express_number ? item.express_number : '订单暂存，请完善寄回快递单号'}}</text>
							</view>
							<view class="text flex flex_ali"><text class="info" style="width: 120rpx;">姓&nbsp;&nbsp;&nbsp;名：</text>{{item.user_man}}</view>
							<view class="text"><text class="info">电话号码：</text>{{item.user_phone}}</view>
						</view>
						<view class="details_icons">
							<view class="infos_btn" @tap.stop="goToUrl(item.id)">
								<text class="iconfont icon-chakan"></text>
								<view class="" style="margin-top: 10rpx;font-size: 28rpx;color: #6c6c6c;">查看</view>
							</view>
							<view :class="[!item.express_number ? 'infos_btn':'forbidden']" @tap.stop="goToUrl(item.id)">
								<text class="iconfont icon-tijiao"></text>
								<view class="" style="margin-top: 10rpx;font-size: 28rpx;color:#6c6c6c;">提交</view>
							</view>
							<view class="infos_btn" @tap.stop="openShow(item.id)">
								<text class="iconfont icon-shanchu2"></text>
								<view class="" style="margin-top: 10rpx;font-size: 28rpx;color: #6c6c6c;">删除</view>
							</view>
						</view>
					</view>
					<view class="line"></view>	
					<view class="send_item_fot flex flex_bet">
						<text style="font-size: 28rpx;font-weight: 700;" v-if="item.id === parentId">母件</text>
						<text style="font-size: 28rpx;font-weight: 700;" v-else>子件</text>
						<text v-if="item.id === parentId">*请留意系统将自动按产品拆单;</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" v-if="tableData.length !== 0"/>
	</view>
</template>

<script>
	import {repairBranchList,
					repairDelete,
					repairStatistics} 
					from '@/api/repair.js'
	export default {
		onLoad(option) {
			console.log(option);
			this.expressNum = option.express_number
			this.getLettersList(option.express_number,0)
		},
		data() {
			return {
				tabList:[
					{
						name: '全部',
						id:0
					}, {
						name: '快递中',
						id:1
					}, {
						name: '签收',
						id:2
					}, {
						name: '复判',
						id:3
					}, {
						name: '报价',
						id:4
					}, {
						name: '维修',
						id:5
					}, {
						name: '寄回',
						id:6
					}
				],
				current:0,
				loadStatus: 'loadmore',
				tableData:[],
				expressNum:'',
				parentId:0, //存储母件id
			};
		},
		methods:{
			tabChange(val){
				console.log(val);
				this.getLettersList(this.expressNum,val.id)
				// if(val.index == 0) return this.list = this.tableData
				// this.list = this.tableData.filter(item=>item.status == val.name)
				// console.log(this.list);
			},
			//获取子母件列表
			getLettersList(val,id){
				// console.log(val);
				this.loadStatus = ''
				repairBranchList({
					express_number:val,
					type:id
				}).then(res=>{
					if(id===0){
						this.parentId = res.data[0].id
					}
					this.loadStatus = ''
					console.log(res);
					this.tableData = res.data
				}).catch(err=>{
					this.loadStatus = 'nomore'
					this.tableData =[]
				})
			},
			onReachBottom() {
				this.loadStatus = 'loading'
				this.getLettersList(this.expressNum)
			},
			goToUrl(id) {
				uni.navigateTo({
					url: '/pages/applicationDetails/index?id=' + id
				})
			},
			openShow(id) {
				let that = this
				uni.showModal({
					title: '',
					content: '是否要删除该订单信息!',
					success: function(res) {
						if (res.confirm) {
							that.getrepairDelete(id)
						}
					}
				});
			},
			//删除订单信息
			getrepairDelete(id) {
				repairDelete({
					id: id
				}).then(res => {
					this.$refs.uToast.show({
						message: res.msg,
						icon: false,
						type: 'success'
					})
					this.getLettersList(this.expressNum)
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.header_tab{
	// height: 80rpx;
	background: #fff;
}
.tab_content{
	margin: 20rpx;
}
.content{
	padding: 0;
}
.main {
		color: #666;
	}
	.header_search {
		.search {
			flex: 1;
		}
		.toatlity {
			width: 30%;
			text-align: center;
		}
	}

	.state {
		// width: 46%;
		text-align: center;
		// font-size: 28rpx;
		font-size: 26rpx;
		color: #98979c;
		text {
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			padding: 0 20rpx;
			// background: #fff;
			// color: #70b37c;
		}
	}
	.search_select {
		width: 30%;
		height: 64rpx;
		background-color: #fff;
		border-radius: 0 100px 100px 0;
		border-color: rgb(230, 230, 230);
		text-align: center;
		border-width: 2rpx;
		border-style: solid;
		border-left: none;
	}
	.coRed {
		color: red;
	}
	.details {
		position: relative;
		padding: 0 10rpx;
		.details_icons {
			display: flex;
			position: absolute;
			bottom: 0;
			right: 20rpx;
		}
		.infos_btn {
			+.infos_btn {
				// margin-left: 10px;
			}
			text-align: center;
			color: #6c6c6c;
			text {
				padding: 8rpx 15rpx;
				font-size: 48rpx;
				display: inline-block;
			}
		}
	}
	//禁用状态下
	.forbidden{
		text-align: center;
		text {
			background: #fff;
			// padding: 10px;
			padding: 8rpx 15rpx;
			border-radius: 50%;
			font-size: 48rpx;
			color:#bcbcbc;
			display: inline-block;
		}
	}
	.send_item{
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		.date{
			padding-top: 20rpx;
			padding-left: 10rpx;
			background: #60606a;
			.time{
				font-size: 26rpx;
				color: #97969a;
			}
		}
		.line{
			width: 95%;
			height: 1px;
			background: #ededed;
			margin: 10rpx auto;
		}
	
		.text,.info{
			font-size: 24rpx !important;
		}
		.info{
			color:#9b9b9b;
		}
		.letter{
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			color: #e8701a;
			font-size: 24rpx;
		}
		.send_item_fot{
			height: 40rpx;
			line-height: 40rpx;
			padding:0 10rpx 10rpx 10rpx;
			text{
				color: #f5b5a3;
				font-size: 24rpx;
			}
		}
	}
	.signed{
		background-color: #d9ffe5 !important;
		color: #36af57 !important;
	}
	.unreceipted{
		background-color: #ffefef !important;
		color: #df6163 !important;
	}
</style>
